<div class='content'>
  <div *ngIf="pairs.length === 0">
    No open pairs
  </div>
  <table *ngIf="pairs.length > 0">
    <tr>
      <th colspan='3'>Buy Leg</th>
      <th colspan='3'>Sell Leg</th>
      <th>Summary</th>
    </tr>
    <tr>
      <th>Broker</th>
      <th>Size</th>
      <th>Filled Price</th>
      <th>Broker</th>
      <th>Size</th>
      <th>Filled Price</th>
      <th>Entry PL</th>
      <th>Entry PL %</th>
      <th>Current Exit Cost</th>
    </tr>
    <tr *ngFor="let pair of pairs">
      <td>{{pair.pair[0].broker}}</td>
      <td>{{pair.pair[0].size | number:'.3-3'}}</td>
      <td>{{pair.pair[0].averageFilledPrice | currency:'JPY':'symbol':'.0-0'}}</td>
      <td>{{pair.pair[1].broker}}</td>
      <td>{{pair.pair[1].size | number:'.3-3'}}</td>
      <td>{{pair.pair[1].averageFilledPrice | currency:'JPY':'symbol':'.0-0'}}</td>
      <td>{{pair.pairSummary.entryProfit | currency:'JPY':'symbol':'.0-0'}}</td>
      <td>{{pair.pairSummary.entryProfitRatio | number:'.3-3'}}%</td>
      <td>{{pair.pairSummary.currentExitCost | currency:'JPY':'symbol':'.0-0'}}</td>
    </tr>
  </table>
</div>
